<template>
  <div>
    <my-bread> 个人设置 </my-bread>
    <!-- 栅格化  -->
    <el-row>
      <el-col :span="12">
        <el-form label-width="120px">
          <el-form-item label="编号:"> {{ userFrom.id }}</el-form-item>
          <el-form-item label="手机:"> {{ userFrom.mobile }}</el-form-item>
          <el-form-item label="媒体名称:">
            <el-input v-model="userFrom.name" placeholder="输入媒体名称">
            </el-input>
          </el-form-item>
          <el-form-item label="媒体介绍:">
            <el-input
              v-model="userFrom.intro"
              type="textarea"
              :rows="3"
              placeholder="输入媒体介绍"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱:">
            <el-input v-model="userFrom.email" placeholder="输入邮箱">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="saveModify()" type="primary">
              保存设置</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <!-- 上传 修改头像 -->
      <el-col :span="12">
        <!-- 上传图片 -->
        <el-upload
          class="avatar-uploader"
          action=""
          :http-request="changeFile"
          :show-file-list="false"
        >
          <img v-if="userFrom.photo" :src="userFrom.photo" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <el-button>修改头像</el-button> -->
        <p class="text">修改头像</p>
      </el-col>
    </el-row>
    <!-- <con-a> </con-a>
    <con-b> </con-b> -->
  </div>
</template>

<script>
// import ConA from "@/components/con-a";
// import ConB from "@/components/con-b";
// 导入事件总线
import eventBus from "@/eventBus";
// 导入 token
import auth from "@/utils/auth";
export default {
  // components: { ConA, ConB },
  name: "my-setting",
  data() {
    return {
      // 个人信息接收赋值参数
      userFrom: {
        id: null,
        mobile: null,
        name: null,
        intro: null,
        email: null,
        photo: null
      },
      // 支持上传组件预览图
      imageUrl: null
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 选择图片后会执行的函数
    async changeFile({ file }) {
      // 触发测试
      // console.log("你不发");
      //  测试默认传参
      // console.log(obj);
      // 设置上传
      // 1.得到选择图片数据
      // 2、组装成formdata对象
      const formData = new FormData();
      formData.append("photo", file);
      // 3、 使用axios 提交数据
      try {
        const {
          data: { data }
        } = await this.$http.patch("user/photo", formData);
        // 4、成功
        // 4.1提示：修改头像成功
        this.$message.success("修改成功");
        // 4.2上传成功后的图片进行预览
        this.userFrom.photo = data.photo;
        this.getUserInfo();
        // 4.3同步更新Layout组件的头像
        eventBus.$emit("replace_photo", data.photo);
        // 4.4同步更新本地存储头像
        // 获取数据
        const userContent = auth.getUser();
        // 赋值修改数据
        userContent.photo = data.photo;
        // 修改数据上传;
        auth.setUser(userContent);
      } catch (e) {
        // 5、失败 提示
        this.$message.error("修改失败");
      }
    },
    //  获取信息
    async getUserInfo() {
      const {
        data: { data }
      } = await this.$http.get("/user/profile");
      console.log(data);
      this.userFrom = data;
    },
    // 修改信息
    async saveModify() {
      //  获取要修改的信息值
      const { name, intro, email } = this.userFrom;
      // 编辑用户信息
      try {
        const {
          data: { data }
          // 提交请求
        } = await this.$http.patch("/user/profile", { name, intro, email });
        //  提示修改成功
        this.$message.success("保存成功");
        // 同步Layout组件的用户名
        eventBus.$emit("Modify_name", name);
        // 同步本地存 储 的用户名称
        // 1、拿出数据
        const localUser = auth.getUser();
        // 2、修改数据传值
        localUser.name = name;
        // 存储数据
        auth.setUser(localUser);
      } catch (e) {
        // 打印错误对象内容
        console.dir(e);
        // 判断用户名是否存在
        if (e.response.status === 409) {
          return this.$message.error("用户名存在");
        }
        this.$message.error("保存失败");
      }
    }
  }
};
</script>

<style scoped lang="less">
.text {
  text-align: center;
  font-size: 12px;
}
</style>
